<template>
	<view class="page">
		<u-navbar :safeAreaInsetTop="false">
			<view class="nav-left" slot="left">
				+
			</view>
			<view class="nav-search" @click="goToSearch" slot="center">
				<image src="../../static/icons/ss.png" mode="heightFix"></image>
				<view class="search-text">
					搜索菜谱、食谱、食材...
				</view>
				
				<!-- <input type="text" placeholder="计算机211郭锌烨" /> -->
				<!-- <u-icon name="search" color="#2979ff" size="28"></u-icon> -->
			</view>
			<view class="nav-right" slot="right">
				<view class="more nav-btn" @click="goToCategory">

				</view>
				<view class="notify nav-btn">
					<view class="badge-wrap">
						<u-badge type="error" max="99" :value="notifyCount"></u-badge>
					</view>
				</view>
			</view>
		</u-navbar>
		<view class="select-tabs">
			<view class="tabs-item" v-for="(t, i) in tabs" :key="i" :class="{selected: currentIndex === i}" @click="selectType(i)">
				{{t.title}}
			</view>
		</view>
		
		<!-- 动态组件 -->
		<keep-alive>
			<component ref="childComp" @changeRefresh="changeRefreshHandle" :refresh="refresh" :is="tabs[currentIndex].component"></component>
		</keep-alive>
			
	</view>
</template>

<script>
	import { http } from '../../untils/http.js'
	import EventsView from '../../components/EventsView.vue'
	import FollowFeeds from '../../components/FollowFeeds.vue'
	import NotesView from '../../components/NotesView.vue'
	import Recommended from '../../components/Recommended.vue'
	import VideosView from '../../components/VideosView.vue'
	
	export default {
		data() {
			return {
				notifyCount: 1,
				currentIndex: 1,
				refresh: false,
				tabs: [
					{
						title: '关注',
						// url: 'home/ffeeds/0/20',
						component: FollowFeeds.name
					},
					{
						title: '推荐',
						// url: 'home/recommended/0/20',
						component: Recommended.name
					},
					{
						title: '笔记',
						// url: 'home/notes/0/20',
						component: NotesView.name
					},
					{
						title: '视频',
						// url: 'home/videos/0/20',
						component: VideosView.name
					},
					{
						title: '活动',
						// url: 'home/events/getlists',
						component: EventsView.name
					}
				]
			}
		},
		onLoad() {
			// http(this.tabs[this.currentIndex].url)
		},
		onPullDownRefresh() {
			// console.log('index page onPullDownRefresh');
			// this.refresh = true
			
			this.$refs.childComp.getDataFromServerData(() => {
				console.log('cb被调用了');
				uni.stopPullDownRefresh()
			})
		},
		methods: {
			goToSearch() {
				uni.navigateTo({
					url: '/pages/search/search'
				})
			},
			selectType(index) {
				if (index !== this.currentIndex) {
					// console.log('selected');
					this.currentIndex = index
				}
			},
			changeRefreshHandle(value) {
				console.log('index接到儿子电话', value);
				this.refresh = value
			},
			goToCategory() {
				uni.navigateTo({
					url: '../category/category'
				})
			}
		},
		watch: {
			currentIndex(newValue) {
				// // console.log('监听到index改变');
				
				// // 发送网络请求
				// http(this.tabs[newValue].url)
			}
		},
		components: {
			EventsView,
			FollowFeeds,
			NotesView,
			Recommended,
			VideosView
		}
	}
</script>

<style lang="scss">
	@import "@/uni_modules/uview-ui/index.scss";
	
	.page {
		padding-top: 45px;
		// min-height: 100vh;
		// box-sizing: border-box;
	}

	.nav-left {
		width: 24px;
		height: 24px;
		border-radius: 999px;
		font-size: 20px;
		font-weight: 700;
		text-align: center;
		line-height: 23px;
		background-color: #fc0;
	}

	.nav-search {
		display: flex;
		align-items: center;
		// padding: 0 5px;
		background-color: #eef;
		// Uni自带响应式单位 750rpx 刚好是屏幕宽度
		width: 375rpx;
		height: 26px;
		border-radius: 999px;

		image {
			height: 100%;
			margin-right: 5px;
		}
		
		.search-text {
			font-size: 12px;
		}
	}

	.nav-right {
		display: flex;

		.nav-btn {
			margin-left: 5px;
			width: 26px;
			height: 26px;
			// background-color: pink;
		}

		.more {
			background-image: url(@/static/icons/_w.png);
			background-size: cover;
		}

		.notify {
			position: relative;
			background-image: url(@/static/icons/_z.png);
			background-size: cover;
			
			.badge-wrap {
				position: absolute;
				right: -4px;
				top: -8px;
				width: 16px;
			}
		}
	}
	
	.select-tabs {
		display: flex;
		align-items: flex-end;
		margin-bottom: 8px;
	}
	
	.tabs-item {
		flex: 1;
		margin: 0 5px;
		font-size: 14px;
		text-align: center;
		color: rgba(7, 17, 27, .8);
		// background-color: red;
		
		&.selected {
			position: relative;
			color: #000;
			font-weight: 700;
			font-size: 16px;
			
			&:after {
				position: absolute;
				bottom: -2px;
				left: 50%;
				transform: translate(-50%);
				display: block;
				width: 24px;
				height: 2px;
				background-color: #fc0;
				content: '';
			}
		}
	}
</style>